<template>
  <div class="um-total">
    <div class="um-tab">
      <div class="tab-top">
        <div class="top-first">
          <h2>统计分析</h2>
          <h5>用户数据</h5>
        </div>
        <div class="top-two">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>统计分析</el-breadcrumb-item>
            <el-breadcrumb-item>用户数据</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
      <div class="tab-list">
        <div class="tab-lt">
          <el-button @click="excel">导出Excel</el-button>
          <el-button @click="exportPDF">导出pdf</el-button>
          <span class="report-top">用户数据统计</span>
          <span class="report-time">日期:{{ reportData.reportDate }}</span>
        </div>
        <table class="exceTable" cellspacing="0" cellpadding="0" width="1360px">
          <tr>
            <td colspan="4" class="headBody">用户数据统计</td>
          </tr>
          <tr>
            <td class="tabletrBg">今日新增用户数:</td>
            <td class="tabletrBgl">{{ reportData.todayNewUser }}</td>
            <td class="tabletrBg">总用户数:</td>
            <td class="tabletrBgr">{{ reportData.totalUser }}</td>
          </tr>
          <tr>
            <td class="tabletrBg">本周新增用户数:</td>
            <td class="tabletrBgl">{{ reportData.thisWeekNewUser }}</td>
            <td class="tabletrBg">本月新增用户数</td>
            <td class="tabletrBgr">{{ reportData.thisMonthNewUser }}</td>
          </tr>
          <tr>
            <td colspan="4" class="headBody">教师数据统计</td>
          </tr>
          <tr>
            <td class="tabletrBg">本周新增教师数</td>
            <td class="tabletrBgl">{{ reportData.tisWeekTeacher }}</td>
            <td class="tabletrBg">本月新增教师数</td>
            <td class="tabletrBgr">{{ reportData.thisMonthTeacher }}</td>
          </tr>
          <tr>
            <td class="tabletrBg">总教师数</td>
            <td colspan="3" class="tabletrBgr">
              {{ reportData.totalTeacher }}
            </td>
          </tr>
          <tr>
            <td colspan="4" class="headBody">热门课程</td>
          </tr>
          <tr>
            <td class="headBody">课程名称</td>
            <td class="headBody">播放量</td>
            <td class="headBody">占比</td>
            <td class="headBody">备注</td>
          </tr>
          <tr v-for="host in reportData.hotSetmeal" :key="host.reportDate">
            <td class="tabletrBg">{{ host.name }}</td>
            <td class="tablefo">{{ host.course_count }}</td>
            <td class="tablefo">{{ host.proportion }}</td>
            <td class="tablefof"></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      reportData: {
        reportDate: null, //日期
        todayNewUser: 0, //今日新增用户数
        totalUser: 0, //总用户数
        thisWeekNewUser: 0, //本周新增用户数
        thisMonthNewUser: 0, //本月新增用户数
        tisWeekTeacher: 0, //本周新增教师数
        thisMonthTeacher: 0, //本月新增教师数
        totalTeacher: 0, //总教师数
        hotSetmeal: [
          //热门课程
          {
            name: '阳光爸妈升级肿瘤12项筛查（男女单人）体检套餐',
            course_count: 200,
            proportion: 0.222,
          },
          {
            name: '阳光爸妈升级肿瘤12项筛查体检套餐',
            course_count: 200,
            proportion: 0.222,
          },
        ],
      },
    }
  },
  created() {
    const that = this
    that.selectUser()
  },
  methods: {
    toggleSelection(rows) {
      const that = this
      if (rows) {
        rows.forEach((row) => {
          that.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        that.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      const that = this
      that.multipleSelection = val
    },
    //查询所有高中课程
    async selectUser() {
      const that = this
      const { data: res } = await axios.get(
        'http://localhost:81/report/getBusinessReportData'
      )
      console.log('查到所有用户数据', res)
      that.reportData = res.data
    },
    //删除用户
    delHcourse(courseid) {
      const that = this
      alert('删除' + courseid)
      that.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          axios({
            method: 'GET',
            url: 'http://localhost:81/teacher/delTeacherById?id=' + tid,
          }).then((res) => {
            console.log('删除教师', res.data.code)
            if (res.data.code == 200) {
              that.$message.success('删除成功')
              that.selectUser()
            } else {
              that.$message.error('删除失败')
            }
          })
        })
        .catch(() => {
          that.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    //导出excel
    excel() {
      window.location.href = 'http://localhost:81/report/exportBusinessReport'
    },
    //导出pdf
    exportPDF() {
      window.location.href =
        'http://localhost:81/report/exportBusinessReport4PDF'
    },
  },
}
</script>

<style lang="less" scoped>
.um-total {
  width: 1610px;
  height: 720px;
  margin-left: 200px;
  padding: 50px;
  .um-tab {
    background-color: #eee;
    width: 1600px;
    height: 800px;
    .tab-top {
      display: flex;
      justify-content: space-between;
      .top-first {
        display: flex;
        margin-left: 50px;
        h5 {
          margin-top: 28px;
          color: #666;
        }
      }
      .top-two {
        margin: 28px 50px 0 0;
      }
    }
    .tab-list {
      width: 1500px;
      margin: auto;
      .tab-lt {
        margin-left: 50px;
      }
      .report-top {
        color: #666;
        margin-left: 420px;
      }
      .report-time {
        color: #666;
        margin-left: 500px;
      }
      .exceTable {
        border: 1px solid rgba(59, 59, 59, 0.5);
        border-bottom: 0;
        margin-top: 50px;
        margin-left: 50px;

        .headBody {
          border-bottom: 1px solid rgba(59, 59, 59, 0.5);
          font-size: 18px;
          font-weight: bold;
          text-align: center;
        }
        .tabletrBg {
          border-bottom: 1px solid rgba(59, 59, 59, 0.5);
          border-right: 1px solid rgba(59, 59, 59, 0.5);
          width: 340px;
          text-align: right;
          height: 28px;
          line-height: 28px;
        }
        .tabletrBgr {
          border-bottom: 1px solid rgba(59, 59, 59, 0.5);
          width: 340px;
          text-align: center;
        }
        .tabletrBgl {
          border-bottom: 1px solid rgba(59, 59, 59, 0.5);
          border-right: 1px solid rgba(59, 59, 59, 0.5);
          width: 340px;
          text-align: center;
          height: 28px;
          line-height: 28px;
        }
        .tablefo {
          border-right: 1px solid rgba(59, 59, 59, 0.5);
          border-bottom: 1px solid rgba(59, 59, 59, 0.5);
          text-align: center;
        }
        .tablefof {
          border-bottom: 1px solid rgba(59, 59, 59, 0.5);
          text-align: center;
        }
      }
    }
  }
}
</style>
